<template>
  <el-container>
    <el-header style="height: 55px;">
      <div class="header">
        <div class="p-title">贵州省疫情精准防控大数据综合管理平台</div>
        <div class="p-sub-title">
          <el-tag class="radius-tag" effect="dark" size="medium">场所码管理</el-tag>
        </div>
        <div class="r-header">
          <div class="home-wrap">
            <router-link to="/home">
              <!-- <img src="../../assets/ico01.png"/> -->
              <i class="el-icon-s-home"></i>
              管理平台首页
            </router-link>
          </div>
          <div class="system-toggle">
            <el-dropdown>
              <span class="dropdown-link">系统切换</span>
              <el-dropdown-menu slot="dropdown">
                <router-link to="/pla">
                  <el-dropdown-item>平台管理系统</el-dropdown-item>
                </router-link>
                <router-link to="/fk">
                  <el-dropdown-item>防控管理系统</el-dropdown-item>
                </router-link>
                <!-- <div @click="goToHealthy">
                  <el-dropdown-item divided>一场三站疫情防控系统</el-dropdown-item>
                </div> -->
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- <div class="message-wrap">
            <el-badge :value="2" :max="10" class="item">
              <i class="el-icon-bell"></i>
            </el-badge>
          </div> -->
          <div class="right-menu">
            <el-dropdown
              trigger="click"
            >
              <div class="avatar-wrapper">
                <div class="user-avatar">
                  <el-avatar
                    size="medium"
                    fit="fill"
                    :src="avatar"
                  >
                    <el-avatar>avatar</el-avatar>
                  </el-avatar>
                </div>
                <div class="user-name">
                  {{userInfo.userName}}
                  <i class="el-icon-caret-bottom" />
                </div>
              </div>
              <el-dropdown-menu slot="dropdown">
                <router-link to="/csm/profile">
                  <el-dropdown-item><i class="el-icon-s-custom"/>个人中心</el-dropdown-item>
                </router-link>
                <div @click="logout">
                  <el-dropdown-item divided>
                    <i class="el-icon-switch-button"/>退出登录
                  </el-dropdown-item>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside class="custom-aside" width="235px">
        <el-menu
          router
          background-color='#fff'
          text-color='#2f3542'
          active-text-color='#409EFF'
          :collapse-transition='true'
          mode='vertical'
        >
          <el-menu-item index="/csm/dashboard">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu :index="masterItem.id" v-for="(masterItem) in menus" :key="masterItem.id">
            <template slot="title">
              <i :class="masterItem.icon"></i>
              <span slot="title" v-text="masterItem.label"></span>
            </template>
            <el-menu-item :index="subItem.path" v-for="(subItem) in masterItem.children" :key="subItem.id" v-text="subItem.label"></el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <!--面包屑导航页签-->
        <div class="breadcrumb-container">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="breadCrumbItem in matchedArr" :key="breadCrumbItem.href" :to="breadCrumbItem.href">
              {{breadCrumbItem.text}}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="routerView">
          <router-view/>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// import SidebarItem from '../../components/csm/SidebarItem.vue'
import { healthyPlaUrl, logoutUrl, selectUserMenuTree } from '@/http/apiUrls';
import * as token from '@/utils/auth.js';
export default {
  components: { },
  name: 'CSMHome',
  computed: {
    matchedArr(){
      let temps = [];
      this.$route.matched.filter((item,index,self) => {
        if(item.meta.title){
            let obj = {
              text: item.meta.title,
              href: item.path
            };
            if(this.$route.path === obj.href){
              obj.disabled = true
            }
            temps.push(obj);
        }
      });
      return temps;
    }
  },
  data() {
    return {
      userInfo:{
        userName: ''
      },
      breadList: [],
      menus:[],
      userRoutes: [
        {
          path: '/csm/dashboard',
        }
      ],
      logo: require(`@/assets/avatar.jpg`),
      avatar: require(`@/assets/avatar.jpg`)
    }
  },
  created() {
    this.initUserInfo()
    this.getMenuItem()
  },
  methods: {
    getMenusById(menus, id){
      if(menus && menus.length > 0){
        let menu = menus.find(item => item.id === id);
        if(menu){
          return menu.children;
        }
      }
    },
    // 获取用户的菜单
    getMenuItem(){
      this.$postJson(selectUserMenuTree, {}).then(res => {
        if(res){
          const fkMenus = this.getMenusById(res, '1518506914357444608')
          this.menus = fkMenus
        }
      })
    },
    initUserInfo(){
      const userInfo = token.getUserInfo()
      this.userInfo = userInfo;
    },
    logout(){
      token.logout()
      this.$router.replace("/login")
      // if(!this.userInfo){
      //   token.logout()
      //   this.$router.replace("/login")
      // }else{
      //   const requestData = {
      //     clientId: 'admin_web',
      //     userId: this.userInfo.userId,
      //     token: token.get()
      //   }
      //   this.$postJson(logoutUrl, requestData).then(res => {
      //     if(res){
      //       token.logout()
      //       this.$router.replace("/bid-login")
      //     }
      //   })
      // }
      
    },
    goToHealthy(){
      const tokenStr = token.get()
      let url = healthyPlaUrl+"?accessToken="+tokenStr;
      console.log(url);
      location.href = url
    }

  }
}
</script>
<style lang="scss">
.el-header {
  height: 55px;
  z-index: 999;
  padding: 0;
}
.el-aside {
    height: calc(100vh - 55px);// 设置左侧 aside 高度
}
.el-main {
    padding: 0;
    height: calc(100vh - 55px);// 设置主体 main 高度
}

.el-menu{
  border: 0;
}

.custom-aside{
  margin:0;
  padding:0;
  background-color:#fff;
  border-right: 1px solid #e8e8e8;

  // li.is-active{
  //   border-left: 3px solid rgb(64, 158, 255);
  // }
  
}
.header{
  z-index: 999;
  width: 100%;
  background-color: #fff;
  height: 55px;
  padding: 0 15px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  font-size: 1rem;
  -webkit-box-shadow: 0 1px 3px rgba(179, 173, 173, 0.15);
  box-shadow: 0 1px 3px rgba(179, 173, 173, 0.15);

  .p-title{
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
  }

  .p-sub-title{
    margin-left: 1rem;

    .radius-tag{
      border-radius: 15px;
    }
  }

  .r-header{
    flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;

    .home-wrap{
      cursor: pointer;
      font-size: 1rem;
      display: inline-block;
      font-weight: 600;
      color: #409eff;
      img{
        height: 15px;
      }
    }
    .home-wrap:hover{
      color: #747d8c;
    }

    .dropdown-link{
      cursor: pointer;
      font-size: 1rem;
    }
    .dropdown-link:hover{
      color: #006ACC;
    }

    .system-toggle{
      margin: 0 2rem;
    }

    .message-wrap{
      margin: 0 2rem;
    }

  }

  .right-menu {
    .avatar-wrapper {
      display: flex;
      display: -webkit-flex;
      cursor: pointer;
      align-items: center;
      .user-name {
        margin-left: 8px;
        font-size: 1rem;
      }
    }
    .avatar-wrapper:hover{
      color: #006ACC;
    }
  }
}

.breadcrumb-container{
  z-index: 888;
  padding: 13px 0 13px 15px;
  background-color: #fff;
  position: fixed;
  width: 100%;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
}

.routerView{
  padding-top: 38px;
}
</style>